<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div></div>

    <script>

        // 伪数组  --- 对象
        //   拥有一些和数组相同的属性或者特点   下标  length
        //    arguments         
        //    HTMLCollection
        //    NodeList    forEach
        //    classList

        // 把伪数组变成真数组  push


        // DOM操作
        //   qs   qsa 
        //   parentNode   children    previousElementSibling   nextElementSibling
        //   createElement()   appendChild()   insertBefore
        //   remove()  removeChild()


        
        // 标签    既是js对象也是html标签
        //     oP.index   把它当做js对象    相当于给标签添加了自定义属性
        //     oP.setAttribute('index' , 1)   把它当做标签   相当于给标签添加了自定义属性    在标签上可以看见


        // 标签的属性问题
        //    自有属性    简写oP.id     oP.setAttribute()    oP.getAttribute()
        //    自定义属性   oP.setAttribute()    oP.getAttribute()


        // 关于类名的操作
        //   oP.className  字符串
        //   oP.classList  伪数组
        //      add()   remove()    replace()    contains() 


        // 选项卡  全选反选  




        // var person = {
        //     0 : 'hi' , 
        //     1 : 'hello' ,
        //     length : 6 ,
        //     name : 'yy' , 
        //     age : 18 ,
        //     say : function(){
        //         console.log('hello');
        //     }
        // }


        // var car = {
        //     name : '大奔' ,
        //     color : 'black' ,
        //     run : function() {
        //         console.log('启动了');
        //     }
        // }



        var oDiv = document.querySelector('div') ;
        oDiv.index = 666 ;   // js对象
        console.dir(oDiv) ;


        oDiv.setAttribute('qq' , '666') ;   // 标签
      

    </script>
    
</body>
</html>